<template>
  <div class="death-record-detail">
    <a-descriptions v-if="record" :column="2" bordered>
      <a-descriptions-item label="姓名">{{ record.name }}</a-descriptions-item>
      <a-descriptions-item label="死亡日期">{{ record.deathDate }}</a-descriptions-item>
      <a-descriptions-item label="死亡时间">{{ record.deathTime }}</a-descriptions-item>
      <a-descriptions-item label="死亡地点">{{ record.deathLocation }}</a-descriptions-item>
      <a-descriptions-item label="死因分类">{{ record.deathCause }}</a-descriptions-item>
      <a-descriptions-item label="具体死因">{{ record.specificCause }}</a-descriptions-item>
      <a-descriptions-item label="目击者">{{ record.witnesses }}人</a-descriptions-item>
      <a-descriptions-item label="报告人">{{ record.reportedBy }}</a-descriptions-item>
      <a-descriptions-item label="遗言" :span="2">{{ record.lastWords || '-' }}</a-descriptions-item>
      <a-descriptions-item label="备注" :span="2">{{ record.notes || '-' }}</a-descriptions-item>
    </a-descriptions>

    <div class="actions">
      <a-space>
        <a-button @click="$emit('close')">关闭</a-button>
      </a-space>
    </div>
  </div>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue'

const props = defineProps({
  record: Object
})

const emit = defineEmits(['close'])
</script>

<style lang="scss" scoped>
.death-record-detail {
  .actions {
    margin-top: 16px;
    text-align: right;
  }
}
</style>
